import React, { useState } from 'react';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Button, Layout, Menu, MenuProps, theme } from 'antd';
import { Outlet, useNavigate, useLocation, useParams } from 'react-router-dom';
import { routes_list } from '@/router/routes.tsx';
import './BaseLayout.less';
const { Header, Sider, Content } = Layout;
interface LevelKeysProps {
	key?: string;
	children?: LevelKeysProps[];
}
const getLevelKeys = (items1: LevelKeysProps[]) => {
	const key: Record<string, number> = {};
	const func = (items2: LevelKeysProps[], level = 1) => {
		items2.forEach(item => {
			if (item.key) {
				key[item.key] = level;
			}
			if (item.children) {
				func(item.children, level + 1);
			}
		});
	};
	func(items1);
	return key;
};

const levelKeys = getLevelKeys(routes_list as LevelKeysProps[]);

const BaseLayout: React.FC = () => {
	const location = useLocation();
	const arrLoc = location.pathname.split('/');
	const defaultSelectedKeys = arrLoc[arrLoc.length - 1] || '';
	const paramsLocation = useParams();
	const query = new URLSearchParams(location.search);
	const [stateOpenKeys, setStateOpenKeys] = useState<string[]>(arrLoc);
	const [stateSelectKeys] = useState<string[]>([defaultSelectedKeys]);
	// js 路由跳转方法
	const navgate = useNavigate();
	const [collapsed, setCollapsed] = useState(false);
	const {
		token: { colorBgContainer, borderRadiusLG }
	} = theme.useToken();
	const handlerMenu = (e: any) => {
		console.log('handlerMenu', e);
		const keyPath = [...e.keyPath];
		const toPath = `/${keyPath.reverse().join('/')}`;
		console.log('toPath', toPath);
		navgate(toPath);
	};
	const onOpenChange: MenuProps['onOpenChange'] = (openKeys: any) => {
		const currentOpenKey = openKeys.find((key: string) => stateOpenKeys.indexOf(key) === -1);
		// open
		if (currentOpenKey !== undefined) {
			const repeatIndex = openKeys
				.filter((key: string) => key !== currentOpenKey)
				.findIndex((key: string) => levelKeys[key] === levelKeys[currentOpenKey]);

			setStateOpenKeys(
				openKeys
					// remove repeat key
					.filter((_: string, index: number) => index !== repeatIndex)
					// remove current level all child
					.filter((key: string) => levelKeys[key] <= levelKeys[currentOpenKey])
			);
		} else {
			// close
			setStateOpenKeys(openKeys);
		}
	};
	return (
		<Layout className="full_screen">
			<Sider trigger={null} collapsible collapsed={collapsed}>
				<div className="demo-logo-vertical"></div>
				<Menu
					theme="dark"
					mode="inline"
					openKeys={stateOpenKeys}
					defaultSelectedKeys={stateSelectKeys}
					onOpenChange={onOpenChange}
					items={routes_list}
					onClick={handlerMenu}
				/>
			</Sider>
			<Layout>
				<Header style={{ padding: 0, background: colorBgContainer }}>
					<Button
						type="text"
						icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
						onClick={() => setCollapsed(!collapsed)}
						style={{
							fontSize: '16px',
							width: 64,
							height: 64
						}}
					/>
				</Header>
				<Content
					style={{
						margin: '16px 16px',
						padding: 20,
						minHeight: 280,
						overflow: 'auto',
						background: colorBgContainer,
						borderRadius: borderRadiusLG
					}}
				>
					<Outlet></Outlet>
				</Content>
			</Layout>
		</Layout>
	);
};

export default BaseLayout;
